<template>
  <div class="count">
    <!-- 关于最大值，等于库存量，所以采用父传子方法传值
         bug1:因为父传子的变量是后台ajax请求到的，且是异步请求，所以第一次传过去的值是undefined 
    解决方法：使用watch监听父传过来的值-->
    <div class="mui-numbox" data-numbox-min="1">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <!-- 选择商品件数时，同步购物车上小图标的数量
      1、无论点击+或—号，还是手动输入件数，都会引起input改变，所以使用input的change事件
      2、触发change事件时，使用ref获取DOM元素的value值，通过子组件向父组件传值-->
      <input
        id="test"
        class="mui-input-numbox"
        type="number"
        value="1"
        @change="sendCount"
        ref="inputCount"
      >
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
  </div>
</template>
<script>
import mui from "../../../../node_modules/mui/js/mui.min.js";
export default {
  data() {
    return {};
  },
  mounted() {
    mui(".mui-numbox").numbox();
  },
  // 父组件传递过来，count子组件可选的最大值，为库存量
  props: ["max"],
  // 因为父传子的变量是后台ajax请求到的，且是异步请求，所以第一次传过去的值是undefined
  // 解决方法：使用watch监听父传过来的值，每次变化，就重新赋值，所以最后一次赋的值一定是库存量
  watch: {
    // bug:参数不能写成new，因为new是关键字
    max: function(newVal) {
      // mui提供的使用js设置最大值
      // bug:不能使用data变量接收newVal，然后采用属性绑定的方式吧最大值给:data-numbox-max='变量'
      // 原因：watch监听，会使变量重新赋值，动态变化，但是第一次的变量值undefined传给属性值以后不会再改变
      mui(".mui-numbox")
        .numbox()
        .setOption("max", newVal);
    }
  },
  methods: {
    // 子组件向父组件传递，用户选中的商品件数
    sendCount() {
      // 获取input的value值
      let count = parseInt(this.$refs.inputCount.value);
      this.$emit("getCount", count);
    }
  }
};
</script>
<style lang="less" scoped>
</style>